<template>
  <div class="dataview">
      <headnav></headnav>
      <el-main class="main">
    <el-row :gutter="8">
    <el-col :span="6" v-for="(o,index) in cardList" :key="index" >
        <el-card :body-style="{ padding: '0px'}"  class="card" :class="'color'+index">
            <div slot="header" class="clearfix">
                <span>{{o.cardName}}</span>
               
            </div>
        <div style="padding: 8px; text-align:center;font-size:30px">
            <span>{{o.content}}</span>
            <div class="bottom clearfix">
            <i :class="o.icon"></i>
            </div>
        </div>
        </el-card>
    </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
          <h3>数据连接分布图</h3>
          <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
      </el-col>
      <el-col :span="6">
          <h3>数据模型任务状态</h3>
          <div class="modelstate">
              <el-card :body-style="{ padding: '0px'}"  class="card color4" >
                    <div slot="header" class="clearfix">
                        <span>已通过审核</span>
                    
                    </div>
                    <div style="padding: 8px; text-align:center;font-size:20px">
                        <span>30</span>
                        <div class="bottom clearfix">
                        <i class="detail">查看详情</i>
                        </div>
                    </div>
                </el-card>
                <el-card :body-style="{ padding: '0px'}"  class="card color5" >
                    <div slot="header" class="clearfix">
                        <span>待通过审核</span>
                    
                    </div>
                    <div style="padding: 8px; text-align:center;font-size:20px">
                        <span>0</span>
                        <div class="bottom clearfix">
                        <i class="detail">查看详情</i>
                        </div>
                    </div>
                </el-card>
                <el-card :body-style="{ padding: '0px'}"  class="card color6" >
                    <div slot="header" class="clearfix">
                        <span>审核中</span>
                    
                    </div>
                    <div style="padding: 8px; text-align:center;font-size:20px">
                        <span>30</span>
                        <div class="bottom clearfix">
                        <i class="detail">查看详情</i>
                        </div>
                    </div>
                </el-card>
                <el-card :body-style="{ padding: '0px'}"  class="card color7" >
                    <div slot="header" class="clearfix">
                        <span>审核未通过</span>
                    
                    </div>
                    <div style="padding: 8px; text-align:center;font-size:20px">
                        <span>0</span>
                        <div class="bottom clearfix">
                        <i class="detail">查看详情</i>
                        </div>
                    </div>
                </el-card>
          </div>
                
      </el-col>
      <el-col :span="6">
          <h3>表占用存储前十名</h3>
          <div id="myChartsur" :style="{width: '100%', height: '400px'}"></div>
          <!-- <ul>
            <li v-for="(item,index) in progresslist" :key="index" class="prolist">
                <el-row>
                    <el-col :span="4">
                        <span>{{item.name}}</span>
                    </el-col>
                    <el-col :span="20">
                         <el-progress :text-inside="true" :stroke-width="18" :percentage="item.num" :status="item.num===100?'success':'exception'"></el-progress>
                    </el-col>
                </el-row>
            </li>
        </ul> -->
      </el-col>
      <el-col :span="6">
          <h3>任务告警信息</h3>
        <ul :class="{marquee_top:animate}" >
            <li v-for="(item,index) in hotlist" :key="index" class="hotlist">
                <el-row>
                    <el-col :span="12">
                        <span>{{item.name}}</span>
                    </el-col>
                    <el-col :span="12">
                        <span>{{item.num}}</span>
                    </el-col>
                </el-row>
            </li>
        </ul>
      </el-col>
    </el-row>
    </el-main>
  </div>
</template>

<script>
import headnav from '@/components/HeadNav'
export default {
  name: 'dataview',
  components:{
    headnav
  },
   data () {
    return {
        animate:false,
       cardList:[
           {
            cardName:"总项目数",
            content:'4',
            icon:'el-icon-menu'  
           },
           {
            cardName:"总表数",
            content:'79',
            icon:'el-icon-menu'  
           },
           {
            cardName:"占用存储量",
            content:'7551GB',
            icon:'el-icon-menu'  
           },
           {
            cardName:"消耗计算量",
            content:'0CU',
            icon:'el-icon-menu'  
           }
       ],
       hotlist:[
            {
            name:"JOB名称[tmp_test_001]",
            num:"任务执行失败"
           }, 
           {
            name:"JOB名称[tmp_test_002]",
            num:"任务执行超时"
           }, 
           {
            name:"JOB名称[tmp_test_003]",
            num:'任务占用资源过大，已KILL'
           }, 
           {
            name:"JOB名称[tmp_test_004]",
            num:'任务执行成功'
           }, 
           {
            name:"JOB名称[tmp_test_001]",
            num:"任务执行失败"
           }, 
           {
            name:"JOB名称[tmp_test_002]",
            num:"任务执行超时"
           }, 
           {
            name:"JOB名称[tmp_test_003]",
            num:'任务占用资源过大，已KILL'
           }, 
           {
            name:"JOB名称[tmp_test_004]",
            num:'任务执行成功'
           }, 
           {
            name:"JOB名称[tmp_test_003]",
            num:'任务占用资源过大，已KILL'
           }, 
           {
            name:"JOB名称[tmp_test_004]",
            num:'任务执行成功'
           }, 
           {
            name:"JOB名称[tmp_test_003]",
            num:'任务占用资源过大，已KILL'
           }, 
           {
            name:"JOB名称[tmp_test_004]",
            num:'任务执行成功'
           }, 
           {
            name:"JOB名称[tmp_test_004]",
            num:'任务执行成功'
           }, 
           {
            name:"JOB名称[tmp_test_004]",
            num:'任务执行成功'
           }, 
           
       ],
       progresslist:[
           {
               name:"项目A",
               num:30
           },
           {
               name:"项目A",
               num:30
           },
           {
               name:"项目A",
               num:30
           },
           {
               name:"项目A",
               num:30
           },
           {
               name:"项目A",
               num:30
           },
           {
               name:"项目A",
               num:30
           },
           {
               name:"项目B",
               num:50
           },
           {
               name:"项目C",
               num:60
           },
           {
               name:"项目B",
               num:100
           }
       ]
    }
  },
  mounted(){
      this.drawChart();
  },
  created: function () {
            setInterval (this.showMarquee, 2000)
        },
  methods:{
      showMarquee: function () {
                this.animate = true;
                setTimeout (() => {
                    this.hotlist.push (this.hotlist[0]);
                    this.hotlist.shift();
                    this.animate = false;
                }, 500);

            },
    drawChart(){
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        let myChartsur = this.$echarts.init(document.getElementById('myChartsur'))
        // 绘制图表
        myChart.setOption({
                title : {
                    text: '数据连接分布图',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    x : 'center',
                    y : 'bottom',
                    data:['excel','hive','txt','oracle','csv','mysql']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    
                    {
                        name:'连接占比',
                        type:'pie',
                        radius : [30, 110],
                       
                        roseType : 'area',
                        data:[
                            {value:10, name:'excel'},
                            {value:5, name:'hive'},
                            {value:15, name:'txt'},
                            {value:25, name:'oracle'},
                            {value:20, name:'csv'},
                            {value:35, name:'mysql'},
                        ]
                    }
                ]
            });
            myChartsur.setOption({
                // title: {
                //     text: '表占用存储前十名',
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['2018.8.25']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ['status_by_account','actor_info','customer_list','accounts','cond_instances','status_by_account','actor_info','customer_list','accounts','cond_instances']
                },
                series: [
                    {
                        name: '2018.8.25',
                        type: 'bar',
                        data: [150, 100, 90, 500, 250,150, 100, 90, 500, 250]
                    },
                ]
            });
    }
  }
}
</script>

<style>
.main{
    padding: 8px;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}   
.clearfix:after {
    clear: both
}
 .bottom {
    margin-top: -10px;
    line-height: 12px;
  }

.bottom i{
    float: right;
    font-size: 30px;
}
.bottom .detail{
    font-size: 16px;
}
.prolist{
    padding: 8px;
}
.hotlist{
    padding: 6px;
}
h3{
    padding: 16px 8px;
}
.card{
    /* background: blue; */
    color:white!important;
}
.color0{
    background:#384454!important
}
.color1{
    background:#16B7A5!important
}
.color2{
    background:#2283DB!important
}
.color3{
    background:#36B1D3!important
}
.color4{
    background:#67C23A!important
}
.color5{
    background:#E6A23C!important
}
.color6{
    background:#909399!important
}
.color7{
    background:#F56C6C!important
}
.card .el-card__header{
    border:none;
    font-weight: bold;
    padding: 8px!important;
}
.modelstate{
    height: 400px;
    display: flex;
    flex-direction: column
}
.modelstate .card{
    flex: 1;
}
</style>